<template>
	<view class="wrap">
		<!-- @leftClick="goBack" -->
		<!-- this.$tab.navigateBack() -->
		<u-navbar :placeholder="true" title="服务项保障信息"  @leftClick="goBack('/pages/signBill/billDetail')">
		</u-navbar>
		<view class="wrap_box">
			<card title="航班信息" style="margin-top: 10px;">
				<template #main>
				<view class="itemList">
					<view class="item border" v-for="(item,index) in flightMsg" :key="index">
						<view class="left1">
							{{item.label}}
						</view>
						<view class="right1">
							{{BillInfo.billInfo[item.value]}}
						</view>
					</view>
				</view>
				</template>
			</card>
			<card title="服务项目" style="margin-top: 10px;">
				<template #main>
					<view class="title">
						<view class="">
							<u-button type="text" @click="show=!show">一般勤务
								<u-icon :name="show==true?'arrow-down':'arrow-up'"></u-icon>
							</u-button>
						</view>
						<u-number-box v-model="value"></u-number-box>
					</view>
					<view class="area" v-show="show" v-for="(item,index) in serviceItem">
						<view class="left view">
							{{item.label}}
						</view>
						<view class="right">
							<view class="view">
								开始时间: {{item.startTime}}
							</view>
							<view class="view">
								结束时间: {{item.endTime}}
							</view>
						</view>
					</view>
				</template>
			</card>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from "vuex";
	export default {
		data() {
			return {
				flightMsg: [{
						label: "航空公司",
						value: 'info-airline'
					},
					{
						label: "航班日期",
						value: 'info-airDate'
					},
					{
						label: "航班号",
						value: 'info-fltNo'
					},
					{
						label: "航线",
						value: 'info-airRoute'
					},
					{
						label: "机号",
						value: 'info-regNo'
					},
					{
						label: "机型",
						value: 'info-icaoCode'
					},
					{
						label: "机位号",
						value: 'info-standNo'
					},
				],
				show: true,
				value: 0,
				serviceItem: [{
						label: '档轮挡',
						startTime: '2023-06-18 12:12:12',
						endTime: '2023-06-18 12:32:12'
					},
					{
						label: '撤轮档',
						startTime: '2023-06-18 12:12:12',
						endTime: '2023-06-18 12:32:12'
					},
				]
			}
		},
		onLoad: function() {},
		computed: {
			...mapGetters(["BillInfo",]),
		},
		methods: {
	
		}
	}
</script>

<style lang="scss" scoped>
	.itemList {
		.item {
			display: flex;
			justify-content: space-between;
			min-height: 30px;
			padding: 10px;
			align-items: center;
			background: #fff;

			// 航班信息
			.left1 {
				font: normal 400 12px 'PingFangSC-Thin', 'PingFang SC Thin', 'PingFang SC', sans-serif;
				color: #5F5F5F;
				width: 30%;
			}

			.right1 {
				font: normal 550 12px 'PingFang-SC-Heavy';
				color: #5F5F5F;
				width: 50%;
				text-align: right;
			}

		}
	}

	.title {
		    display: flex;
		    justify-content: space-between;
	}

	.area {
		background: #f6f6f6;
		padding: 10px 20px 0;
		border-radius: 10px;
		display: flex;
		margin-top:10px;

		.view {
			font: normal 400 13px 'PingFang-SC-Heavy';
			color: #5F5F5F;
			margin-bottom: 10px
		}

		.left {
			width: 30%;
		}

		.right {}
	}
</style>